import { UseSignTransactionExample } from '../../../examples/wallet-hooks';

# useSignTransaction

Use the `useSignTransaction` hook to prompt the user to sign a transaction with their wallet.

```ts
import { Transaction } from '@mysten/sui/transactions';
import {
	ConnectButton,
	useCurrentAccount,
	useSignTransaction,
	useSuiClient,
} from '@mysten/dapp-kit';
import { toBase64 } from '@mysten/sui/utils';
import { useState } from 'react';

function MyComponent() {
	const { mutateAsync: signTransaction } = useSignTransaction();
	const [signature, setSignature] = useState('');
	const client = useSuiClient();
	const currentAccount = useCurrentAccount();

	return (
		<div style={{ padding: 20 }}>
			<ConnectButton />
			{currentAccount && (
				<>
					<div>
						<button
							onClick={async () => {
								const { bytes, signature, reportTransactionEffects } = await signTransaction({
									transaction: new Transaction(),
									chain: 'sui:devnet',
								});

								const executeResult = await client.executeTransactionBlock({
									transactionBlock: bytes,
									signature,
									options: {
										showRawEffects: true,
									},
								});

								// Always report transaction effects to the wallet after execution
								reportTransactionEffects(executeResult.rawEffects!);

								console.log(executeResult);
							}}
						>
							Sign empty transaction
						</button>
					</div>
					<div>Signature: {signature}</div>
				</>
			)}
		</div>
	);
}
```

## Example

<UseSignTransactionExample />

## Arguments

- `transactionBlock`: The transaction to sign.
- `chain`: (optional) The chain identifier the transaction should be signed for.

## Result

- `signature`: The signature of the message, as a Base64-encoded `string`.
- `bytes`: The serialized transaction bytes, as a a Base64-encoded `string`.
- `reportTransactionEffects`: A function to report the transaction effects to the wallet. This
  callback should always be invoked after executing the signed transaction. This function accepts
  the `rawEffects` returned from JSON-RPC `executeTransactionBlock` method, or the `effects.bcs`
  when executing with the GraphQL API.
